/**
 * @Description:
 * @author tao.xie
 * @date $
 */

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
} from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import CustomTradeDetail from './CustomTradeDetail.js'

export default class CustomTradeItem extends Component {

  render () {
    return (
      <View style={styles.container}>
        <View style={styles.titlewrapper}>
          <Text style={{ ...styles.text, ...styles.month }}>{this.props.item.month}</Text>
          <Text style={styles.text}>退款¥{this.props.item.refundFee}</Text>
          <Text style={{ ...styles.text, ...styles.line }}>|</Text>
          <Text style={{ ...styles.text, ...styles.payfee }}>消费¥{this.props.item.payFee}</Text>
        </View>
        <View>
          {this.props.item.tradeDetails.map(item => <CustomTradeDetail key={item.tradeNo} detail={item}/>)}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  titlewrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    height: px2dp(70),
    backgroundColor: 'rgb(242,245,246)'
  },
  text: {
    color: '#999',
    fontSize: px2dp(24),
    lineHeight: px2dp(33)
  },
  month: {
    flex: 1,
    marginLeft: px2dp(30)
  },
  line: {
    marginLeft: px2dp(20),
    marginRight: px2dp(20)
  },
  payfee: {
    marginRight: px2dp(30)
  }
})